@import "./../../../assets/scss/index.scss";

:host{width: 100%;height: 100%;display: block;}
[hidden],.hidden{display: none;}

.title{font-size: pxTorem(22px)}
.content{font-size: pxTorem(18px)}

.setup-container{width: 100%;height: 100%;}
.setup-container{
    display: flex;flex-direction: row;
    ul{
        background: #f0f0f0; border-right: 1px solid #999999;height: 100%;width: pxTorem(256px);display: flex;flex-direction: column;
        li{
            padding: pxTorem(16px) pxTorem(40px);border-bottom: 1px solid #999999;
            .iconfont{font-size: pxTorem(25px);vertical-align: middle;margin-right: pxTorem(12px)}
            span{vertical-align: middle;}
        }
        li.active{color:$mpj-primary;}
    }
    .main{height: 100%;flex:1;}
}

//option-minute
.option-minute-container{
    display: flex;flex-direction: row;
    .left{p{padding: pxTorem(4px) 0;}}
    .operation{
        width: pxTorem(190px);
        .timing{padding: 8px;display: inline-block;min-width: pxTorem(85px);text-align: center;font-size: pxTorem(21px);}
    }
    .count{display: inline-block;$height:pxTorem(20px);width:pxTorem(42px); text-align: center; padding:  0 20px;line-height: $height;height: $height;padding: 10px 20px;border: 1px solid #999999;border-radius:$height; }
    .active{background: $mpj-primary;color: white;}
    .icon{font-size: pxTorem(45px);}
}

.option-switch-container{
    display: flex;flex-direction: row;
}

.ordersetup-container{
    ul{
        li{
            .operation{
                width: pxTorem(190px);
                .timing{padding: 8px;display: inline-block;min-width: pxTorem(85px);text-align: center;font-size: pxTorem(21px);}
            }
            padding: pxTorem(16px);border-bottom: 1px solid #999999;padding-right: pxTorem(16px);
          .count{display: inline-block;$height:pxTorem(20px);width:pxTorem(42px); text-align: center; padding:  0 20px;line-height: $height;height: $height;padding: 10px 20px;border: 1px solid #999999;border-radius:$height; }
          .active{background: $mpj-primary;color: white;}
        }
    }
}

.soundsetup-container{
    ul{
        li{
            padding: pxTorem(16px);border-bottom: 1px solid #999999;padding-right: pxTorem(16px);
        }
    }
}

.displaysetup-container{
    header{color:$mpj-primary;border-bottom: 1px solid #999999; margin: 0  pxTorem(16px);padding: pxTorem(16px) 0;}
    section{
        p{
            padding: pxTorem(16px) pxTorem(16px);
            .radio-button{display: block;margin: 10px 0;}
        }
    }
}

.resetsetup-container{
    ul{
        padding: pxTorem(32px) 0;margin-top: pxTorem(40px);
        li{
            padding: pxTorem(8px) 0;text-align: center;
        }
    }
    .reset{
        width:75%;margin: 0 auto; text-align: center;
        .material-icons{color:#ba5050;font-size: pxTorem(60px);}
        button{background: #ba5050;color: white;font-size: pxTorem(20px);padding: pxTorem(8px) pxTorem(100px);margin: pxTorem(8px) 0;}
        .warn{color:#ba5050;margin: pxTorem(8px) 0; }
        .tooltip{opacity: 0.7;margin: pxTorem(8px) 0;}
    }
}
.forbidden-container{
    height: 100%;
    padding: pxTorem(120px) pxTorem(100px) 0 pxTorem(100px);
    .status{
        padding: 0.4rem 0;
        text-align: center;
        font-size: pxTorem(22px);
    }
    .desc{
        opacity: 0.7;
        margin: 0.4rem 0;
        text-align: center;
        font-size: 0.9rem;
    }
    .btn{
        color: #fff;
        display: block;
        width: pxTorem(260px);
        padding: pxTorem(14px) 0;
        font-size: pxTorem(20px);
        margin: pxTorem(40px) auto 0;
    }
    .forbidden_btn{
        background: #ba5050;
    }
    .open_btn{
        background: #0068d2;
    }
}